<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="account" label-width="150"
				:label-position="labelPosition" label="姓名" prop="driverName">
				<u-input :border="border" placeholder="请输入姓名" v-model="model.driverName" type="text"></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="车牌" prop="carCode" label-width="150">
				<u-input type="text" :border="border" placeholder="请填写车牌号" v-model="model.carCode" />
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="车款" prop="carName" label-width="150">
				<u-input type="text" :border="border" placeholder="请填写车款" v-model="model.carName" />
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="车辆类型" prop="carType" label-width="150">
				<u-input :border="border" type="select" :select-open="selectShow" v-model="model.carType"
					placeholder="请选择车辆类型" @click="selectCartType"></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="载重量" prop="loadCapacity" label-width="150">
				<u-input type="text" :border="border" placeholder="请填写载重量(吨)" v-model="model.loadCapacity" />
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="容量" prop="volumeCapacity" label-width="150">
				<u-input type="text" :border="border" placeholder="请填写容量(m³)" v-model="model.volumeCapacity" />
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="上传车辆图片" prop="photo" label-width="200">
				<u-upload
				:before-remove="beforeRemove" 
				ref="uUpload" 
				:custom-btn="false" 
				:show-upload-list="true" 
				:action="uploadFile.url" 
				:formData="uploadFile.formData" 
				:auto-upload="true" 
				:file-list="fileList"
				:show-progress="true" :deletable="true" :max-count="uploadFile.maxCount" @on-list-change="onListChange" 
				@on-success="OnSuccess"/>
			</u-form-item>
		</u-form>
		<u-button @click="submit">提交</u-button>
		<u-select mode="single-column" :list="carTypeList" v-model="selectShow" @confirm="selectConfirm"></u-select>
	</view>
</template>

<script>
	import { policy } from '../../../../api/uploadFile/upload.js'
	import { getCarTypeRequest } from '../../../../api/driver/vehicle.js'
	export default {
		props:{
			caritem:{
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			let that = this;
			return {
				model: {
					driverName: '',
					carCode: '',
					loadCapacity: 0,
					volumeCapacity: 0,
					carName: '',
					carType: '',
					state: 2,
					car_url: '',
				},
				carTypeList: [
				],
				rules: {
					driverName: [{
							required: true,
							message: '请输入姓名',
							trigger: ['change','blur'],
						},
						{
							min: 2,
							max: 5,
							message: '姓名长度在3到5个字符',
							trigger: ['change', 'blur'],
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.chinese(value);
							},
							message: '姓名必须为中文',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						},
						// 异步验证，用途：比如用户注册时输入完账号，后端检查账号是否已存在
						// {
						// 	trigger: ['blur'],
						// 	// 异步验证需要通过调用callback()，并且在里面抛出new Error()
						// 	// 抛出的内容为需要提示的信息，和其他方式的message属性的提示一样
						// 	asyncValidator: (rule, value, callback) => {
						// 		this.$u.post('/ebapi/public_api/index').then(res => {
						// 			// 如果验证出错，需要在callback()抛出new Error('错误提示信息')
						// 			if(res.error) {
						// 				callback(new Error('姓名重复'));
						// 			} else {
						// 				// 如果没有错误，也要执行callback()回调
						// 				callback();
						// 			}
						// 		})
						// 	},
						// }
					],
					carCode: [{
							required: true,
							message: '请填写车牌号',
							trigger: ['change','blur'],
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.carNo(value);
							},
							message: '车牌号不符合规范',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					loadCapacity: [{
						required: true,
						message: '请填写载重量(吨)',
						trigger: ['change','blur'],
					}],
					volumeCapacity: [{
						required: true,
						message: '请填写载容量(m³)',
						trigger: ['change','blur'],
					}],
					carType: [{
						required: true,
						message: '请选择车辆类型',
						trigger: ['change','blur']
					}],
					carName: [{
						required: true,
						message: '请填写车款信息',
						trigger: ['change','blur']
					}]
				},
				border: false,
				selectShow: false,
				labelPosition: 'left',
				errorType: ['message'],
				uploadFile: {
					url: '',//后端地址
					maxCount: 1, // 最大上传数
					formData: {} ,// 携带的参数
					name: '' // 上传的文件字段名
				},
				fileList: [],
				lists: [], // 组件内部的文件列表,
			};
		},
		computed: {
		},
		created() {
			Object.assign(this.model,this.caritem);
		},
		mounted() {
			this.$refs.uForm.setRules(this.rules);
			this.getPolicy();
		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			}
		},
		methods: {
			// 上传图片之前的钩子函数
			beforeUpload() {
			},
			// 上传成功时返回
			OnSuccess(){
				this.model.carUrl = this.uploadFile.formData.host + "/" + this.uploadFile.formData.key
			},
			getPolicy() {
				console.log('获取灵摆');
				let _self = this;
				policy().then(response => {
					console.log(response);
					_self.uploadFile.url = response.host
					_self.uploadFile.formData.policy = response.policy;
					_self.uploadFile.formData.signature = response.signature;
					_self.uploadFile.formData.ossaccessKeyId = response.accessid;
					_self.uploadFile.formData.key = response.dir + response.key;
					_self.uploadFile.formData.dir = response.dir;
					_self.uploadFile.formData.host = response.host;
				})
			},
			onListChange(lists) {
				// console.log('onListChange', lists);
				this.lists = lists;
			},
			beforeRemove(index, lists) {
				return true;
			},
			// 这里无法判断是保存还是更新操作，所以交给父组件去判断
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$emit('submit',this.model)
						this.model = {}
					} else {
						//console.log(this.$refs.upload.beforeUpload())
						uni.showToast({
							title: '验证失败，请查看是否输入正确信息',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			selectCartType() {
				getCarTypeRequest().then(res => {
					let temp = res.body.map(item => {
						return {
							value: item.carType,
							label: item.carType,
							carVolume: item.carVolume,
							carWeight: item.carWeight
						}
					})
					this.carTypeList = temp;
					this.selectShow = true;
				})
			},		
			// 选择车辆类型回调
			selectConfirm(e) {
				this.model.carType = '';
				this.carTypeList.map(item => {
					if(item.value === e[0].value) {
						this.model.loadCapacity = item.carWeight
						this.model.volumeCapacity = item.carVolume
					}
				})
				e.map((val, index) => {
					this.model.carType += this.model.carType == '' ? val.label : '-' + val.label;
				})
				
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		padding: 30rpx;
		z-index: -10;
	}
</style>
